<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="border: 1px solid red; padding: 10px;">
        <h1>新闻列表</h1>
        <news-list></news-list>
        </div>
        <template id="news-list-template">
        <ul style="border: 1px solid blue; padding: 10px;">
        <news-item v-for="news in newsArray" :id="news.id"
                    :title="news.title" :content="news.content" @del="del">
        </news-item>
        </ul>
        </template>
    <template id="news-item-template">
        <li style="border: 1px solid green; padding: 10px;">
        <span>新闻ID: {{ id }}</span> <br />
        <span>标题：{{ title }}</span> <br />
        <span>内容：{{ content }}</span>
        <span><button @click="delMe(id)">删除</button></span>
        </li>
    </template>  
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
    <script>
    // 创建子组件
    const newsItem = {
    template: '#news-item-template',
    props: ['id', 'title', 'content'],
    methods: {
        delMe(id) {
        this.$emit('del', id);
        }
    }
    };
    // 创建父组件
    const newsList = {
    template: '#news-list-template',
    components: {
        'news-item': newsItem
    },
    data() {
        return {
        newsArray: []
        };
    },
    created() {
        this.loadNewsList();
    }, 
    methods: {
        loadNewsList() {
        axios.get('data/news.json')
        .then(response => {
            this.newsArray = response.data;
            });
        },
        del(id) {
        const index = this.newsArray.findIndex(item => item.id === id);
        this.newsArray.splice(index, 1);
        }
    }
    };
    // 创建Vue实例，并将父组件注册到Vue实例中
    const app = new Vue({
    el: '#app',
    components: {
        'news-list': newsList
    }
    });
</script>
</body>
</html>